React Suspense và Error Boundaries: Xử lý Tải và Lỗi Nâng cao

React Suspense và Error Boundaries là những tính năng mạnh mẽ cho phép các nhà phát triển xây dựng các ứng dụng linh hoạt và thân thiện hơn với người dùng. Chúng cung cấp một cách khai báo để xử lý các trạng thái tải và các lỗi không mong muốn, cải thiện trải nghiệm người dùng tổng thể và đơn giản hóa quy trình phát triển. Bài viết này cung cấp một hướng dẫn toàn diện để sử dụng React Suspense và Error Boundaries một cách hiệu quả, bao gồm mọi thứ từ các khái niệm cơ bản đến các kỹ thuật nâng cao.

Tìm hiểu về React Suspense

React Suspense là một cơ chế để "tạm dừng" việc render một component cho đến khi một điều kiện cụ thể được đáp ứng, thường là sự sẵn có của dữ liệu từ một hoạt động bất đồng bộ. Điều này cho phép bạn hiển thị giao diện người dùng dự phòng (fallback UI), chẳng hạn như các chỉ báo tải, trong khi chờ dữ liệu được tải. Suspense đơn giản hóa việc quản lý các trạng thái tải, loại bỏ nhu cầu render có điều kiện thủ công và cải thiện khả năng đọc mã nguồn.

Các khái niệm chính của Suspense

• Ranh giới Suspense (Suspense Boundaries): Đây là các component React bao bọc các component có thể bị tạm dừng. Chúng xác định giao diện người dùng dự phòng sẽ được hiển thị trong khi các component được bao bọc bị tạm dừng.
• Giao diện người dùng dự phòng (Fallback UI): Giao diện được hiển thị trong khi một component bị tạm dừng. Đây thường là một chỉ báo tải hoặc một trình giữ chỗ (placeholder).
• Tìm nạp dữ liệu bất đồng bộ: Suspense hoạt động trơn tru với các thư viện tìm nạp dữ liệu bất đồng bộ như fetch, axios, hoặc các giải pháp tìm nạp dữ liệu tùy chỉnh.
• Tách mã (Code Splitting): Suspense cũng có thể được sử dụng để trì hoãn việc tải các mô-đun mã, cho phép tách mã và cải thiện hiệu suất tải trang ban đầu.

Triển khai Suspense cơ bản

Đây là một ví dụ đơn giản về cách sử dụng Suspense để hiển thị một chỉ báo tải trong khi tìm nạp dữ liệu:

import React, { Suspense } from 'react';

// Mô phỏng việc tìm nạp dữ liệu (ví dụ: từ một API)
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'John Doe', age: 30 });
    }, 2000);
  });
};

// Tạo một resource mà Suspense có thể sử dụng
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const userData = createResource(fetchData);

// Component đọc từ resource
const UserProfile = () => {
  const data = userData.read();
  return (
    

      
Tên: {data.name}
      
Tuổi: {data.age}
    
  );
};

const App = () => {
  return (
    Đang tải dữ liệu người dùng...